01 實作截圖紀錄
點擊圖片可放大，使用 ← → 切換截圖
Screenshot 01 · 塗鴉筆記本 APP
Screenshot 02
Screenshot 03
Screenshot 04 · 學習進度檢視
Screenshot 05
Screenshot 06
Screenshot 07
Screenshot 08 · Visual Studio Code
Screenshot 09
Screenshot 10
02 專案實作步驟 (Implementation Steps)
步驟 01：畫布與環境初始化
在 HTML 中建立 Canvas 元素並透過 CSS 進行定位。使用 Visual Studio Code 進行代碼編寫，確保畫布能填滿目標區域。
步驟 02：繪圖邏輯開發
利用 JavaScript 監聽滑鼠點擊與移動事件，獲取座標並透過 2D context 繪製路徑，實作基礎塗鴉功能。
步驟 03：工具列與交互設計
整合顏色選擇器與畫筆粗細控制項，提升應用的實用性。透過 UI 控制 JavaScript 變數以動態調整繪圖樣式。
步驟 04：功能驗證與調試
檢視目前的學習進度是否可以流暢畫圖。解決在不同解析度下座標偏移的問題，確保繪圖反饋精確。
心得感悟 (Reflection)
在完成這個「塗鴉筆記本 APP」的實作過程中，我深刻體會到前端技術開發的複雜性與細膩之處。雖然表面上僅僅是在網頁上畫線，但背後涉及到的 Canvas 座標計算、滑鼠事件監聽以及繪圖上下文的動態切換，都顯得相當棘手且繁瑣。
這份作業最讓我感到挑戰的地方在於，要讓繪圖體驗達到「直覺且流暢」的程度，需要不斷進行代碼調試。尤其是處理 VS Code 的即時預覽與實際渲染之間的微小偏差，確實耗費了不少精力。這讓我意識到，開發一個看似簡單的互動工具，實際上需要極高的專注力與對細節的堅持。
此外，我也體會到技術開發背後的「經濟性」問題。無論是開發環境的維護，還是未來若要整合更高級的雲端存儲或 AI 識別功能，都需要一定的經濟預算支持。從最初的 API 配額限制到現在的功能擴展，我明白完善一個項目不僅需要邏輯思維，更需要合理的資源規劃。這次實作讓我從中獲得了寶貴的調試經驗，也為我未來的全棧開發之路打下了堅實的基礎。